<style scoped>
.chart {
  width: 100%;
  float: left;
}


/*.chart div {
      height: 400px;
      float: left;
  }*/

.Col {
  padding: 30px 20px;
}

.blist {
  /*background-color: #d1e4e8;*/
  /*height: 200px;*/
  cursor: pointer;
  color: #6eceac;
}

.userlist {
  padding-left: 30%;
  float: right;
  color: #6eceac;
}

.ecard {
  height: 300px;
  margin-bottom: 10px;
  /*margin-right: 10px;*/
}

.hcard {
  height: 610px;
  margin-left: 20px;
}

.p-img {
  width: 100%;
  /*height: 60px;*/
  line-height: 60px;
  float: right;
  margin-top: -50px;
}

.p-img img {
  border-radius: 20px;
  /*margin: 10px 0px 10px 10px;*/
  width: 20px;
  height: 20px;
  float: right;
}
</style>

<template>
  <div class="layout-content-body">
    <Row>
      <Col :span="12">
      <Card class="ecard">
        <p slot="title">
          {{ userInfo.Title }}
        </p>
        <span class="p-img">
          <img :src="imgUrl">
        </span>
        <ul>
          <li>姓名:
            <span class="userlist">{{ userInfo.Title }}</span>
          </li>
          <li>账号:
            <span class="userlist">{{ userInfo.Name }}</span>
          </li>
          <li>角色:
            <span class="userlist">{{ state.role.Name }}</span>
          </li>
          <li>单位:
            <span class="userlist">{{ state.org.Name }}</span>
          </li>
          <li>部门:
            <span class="userlist">{{ state.dept.Name }}</span>
          </li>
          <!-- <li>职业:
            <span class="userlist">{{userInfo.Expert}}</span>
          </li> -->
          <li>岗位:
            <span class="userlist">{{ userInfo.Job }}</span>
          </li>
          <li>电话:
            <span class="userlist">{{ userInfo.Phone }}</span>
          </li>
          <li>邮件:
            <span class="userlist">{{ userInfo.Email }}</span>
          </li>
          <li>上次活动时间:
            <span class="userlist">{{ userInfo.Logintime }}</span>
          </li>
          <li>上次活动ip:
            <span class="userlist">{{ userInfo.Loginip }}</span>
          </li>
        </ul>
      </Card>
      <Card class="ecard">
        <p slot="title">
          公告
        </p>
        <ul>
          <li 
            v-for="item in bulletins" 
            :key="item.Id" 
            class="blist" 
            @click="show(item)"
          >
            <Icon 
              type="information-circled" 
              style="color: red"
            />
            &nbsp;&nbsp;&nbsp;&nbsp;{{ item.Title }} {{ item.Utime.slice(0,10) }}
          </li>
        </ul>
      </Card>
    </Col>
      <Col :span="12">
    <!-- <Card class="hcard">
        <p slot="title">
          观看历史
        </p>
        <Timeline class="hisLine" pending>
          <Timeline-item v-for="item in getHistorys" :key="item.Id">
            <p class="time">{{item.Ctime.slice(0,10)}}</p>
            <p class="content">{{item.VideoName}}&nbsp&nbsp观看时长:{{item.LookLong}}秒</p>
          </Timeline-item>
          <Timeline-item>
            <router-link to="/history">查看更多</router-link>
          </Timeline-item>
        </Timeline> -->
    </Card>
    </Col>
    </Row>
    <!-- <Row style="background:#eee;padding:20px;" v-if="role.Type<2">
      <Col :span="12">
      <Card>
        <chart :options="liveOptions"></chart>
      </Card>
      </Col>
      <Col :span="12">
      <Card>
        <chart :options="videoOptions"></chart>
      </Card>
      </Col>

    </Row> -->
    <Modal 
      v-model="showModel" 
      title="公告" 
      width="900" 
      style=" height:400px;"
    >
      <div v-html="bulletin.Content" />
    </Modal>

  </div>
</template>

<script>
import echarts from 'echarts';
import {
  CPT_ROOT,
  V_ROOT
} from '@/api/config';
import api from '@/api';
import {
  mapActions,
  mapState,
  mapMutations
} from 'vuex';
export default {
  data () {
    return {
      value: 0,
      bulletins: [],
      showModel: false,
      bulletin: {}
    };
  },
  computed: {
    // ...mapState(['isLogin', 'org', 'userInfo', 'dept', 'role']),
    userInfo () {
      return this.$store.state.app.userInfo;
    },
    state () {
      return this.$store.state.app;
    },
    imgUrl () {
      if (!this.userInfo.Photo) {
        return '/static/default.jpg';
      } else {
        return V_ROOT + '/' + this.userInfo.Photo;
      }
    }
  },
  mounted: function () {
    this.getBulletin();

    // setTimeout(() => {
    //   this.welcom()
    // }, 1000);
  },
  methods: {
    // ...mapMutations(['SET_MSG']),
    // welcom(){
    //   if (this.isLogin) {
    //     this.$Notice.success({
    //       top: 100,
    //       title: '欢迎' + this.userInfo.Title + '登陆系统',
    //       desc: '祝您有美好的一天！'
    //     });
    //   }
    // },

    getBulletin () {
      this.spinShow = true;
      this.$api.getMyBulletin().then(res => {
        if (!res.error) {
          this.bulletins = res.Data;
        } else {
          this.$Message.error(res.message);
        }
      });
      setTimeout(() => {
        this.spinShow = false;
      }, 300);
    },

    show (data) {
      this.bulletin = data;
      this.showModel = true;
    }
  }

};
</script>
